const canvas = document.querySelector("#c");
const gl = canvas.getContext("webgl2");
if (!gl) alert("WebGL 2 不支持");

// 1. 创建着色器程序
function createShader(gl, type, src) {
  const s = gl.createShader(type);
  gl.shaderSource(s, src);
  gl.compileShader(s);
  return s;
}
const vSrc = `#version 300 es
layout(location=0) in vec4 a_position; layout(location=1) in vec3 a_color; uniform mat4 u_matrix;
out vec3 v_color; void main(){gl_Position=u_matrix*a_position; v_color=a_color;}`;
const fSrc = `#version 300 es
precision highp float; in vec3 v_color; out vec4 fragColor;
void main(){fragColor=vec4(v_color,1.0);}`;
const program = gl.createProgram();
gl.attachShader(program, createShader(gl, gl.VERTEX_SHADER, vSrc));
gl.attachShader(program, createShader(gl, gl.FRAGMENT_SHADER, fSrc));
gl.linkProgram(program);
gl.useProgram(program);

// 2. 顶点数据  (6 面 × 2 三角 × 3 顶点)
const positions = new Float32Array([
  // 前面 (z = 1)
  -1, -1, 1, 1, -1, 1, -1, 1, 1, 1, -1, 1, 1, 1, 1, -1, 1, 1,

  // 后面 (z = -1)
  -1, -1, -1, -1, 1, -1, 1, -1, -1, 1, -1, -1, -1, 1, -1, 1, 1, -1,

  // 左面 (x = -1)
  -1, -1, -1, -1, -1, 1, -1, 1, -1, -1, -1, 1, -1, 1, 1, -1, 1, -1,

  // 右面 (x = 1)
  1, -1, 1, 1, -1, -1, 1, 1, 1, 1, -1, -1, 1, 1, -1, 1, 1, 1,

  // 上面 (y = 1)
  -1, 1, 1, 1, 1, 1, -1, 1, -1, 1, 1, 1, 1, 1, -1, -1, 1, -1,

  // 下面 (y = -1)
  -1, -1, -1, 1, -1, -1, -1, -1, 1, 1, -1, -1, 1, -1, 1, -1, -1, 1,
]);
// 柔和配色：每个面使用统一的淡色，避免刺眼渐变
const faceColors = [
  [0.95, 0.55, 0.6], // 前：珊瑚红
  [0.55, 0.9, 0.65], // 后：薄荷绿
  [0.55, 0.65, 0.95], // 左：天蓝
  [0.98, 0.9, 0.6], // 右：浅黄
  [0.6, 0.9, 0.95], // 上：青色
  [0.9, 0.6, 0.95], // 下：淡紫
];
const colors = new Float32Array(36 * 3);
for (let f = 0; f < 6; f++) {
  const [r, g, b] = faceColors[f];
  for (let i = 0; i < 6; i++) {
    const idx = (f * 6 + i) * 3;
    colors[idx + 0] = r;
    colors[idx + 1] = g;
    colors[idx + 2] = b;
  }
}
const vao = gl.createVertexArray();
gl.bindVertexArray(vao);
// 传位置
const posBuf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, posBuf);
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
// 传颜色
const colBuf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colBuf);
gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
gl.enableVertexAttribArray(1);
gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 0, 0);

// 3. 矩阵工具（极简化版，无依赖）
function perspective(fov, asp, near, far) {
  const f = 1 / Math.tan(fov / 2),
    d = far - near;
  return new Float32Array([
    f / asp,
    0,
    0,
    0,
    0,
    f,
    0,
    0,
    0,
    0,
    -(far + near) / d,
    -1,
    0,
    0,
    (-2 * far * near) / d,
    0,
  ]);
}
function rotationY(t) {
  const c = Math.cos(t),
    s = Math.sin(t);
  return new Float32Array([c, 0, s, 0, 0, 1, 0, 0, -s, 0, c, 0, 0, 0, 0, 1]);
}
// 4x4 矩阵乘法: a*b
function mul4(a, b) {
  const out = new Float32Array(16);
  for (let r = 0; r < 4; r++) {
    for (let c = 0; c < 4; c++) {
      out[c * 4 + r] =
        a[0 * 4 + r] * b[c * 4 + 0] +
        a[1 * 4 + r] * b[c * 4 + 1] +
        a[2 * 4 + r] * b[c * 4 + 2] +
        a[3 * 4 + r] * b[c * 4 + 3];
    }
  }
  return out;
}
const matLoc = gl.getUniformLocation(program, "u_matrix");

// 4. 渲染循环
function render(t) {
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  gl.clearColor(0.1, 0.1, 0.1, 1);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  gl.enable(gl.DEPTH_TEST);
  gl.enable(gl.CULL_FACE);
  gl.cullFace(gl.BACK);
  const aspect = gl.canvas.width / gl.canvas.height;
  const proj = perspective(Math.PI / 4, aspect, 0.1, 100);
  const view = new Float32Array([
    1,
    0,
    0,
    0,
    0,
    1,
    0,
    0,
    0,
    0,
    1,
    0,
    0,
    0,
    -5,
    1, // ← 平移 z = -5
  ]);

  const rot = rotationY(t * 0.001);
  // MVP = proj * view * rot
  const vp = mul4(proj, view);
  const mvp = mul4(vp, rot);
  gl.uniformMatrix4fv(matLoc, false, mvp);
  gl.bindVertexArray(vao);
  gl.drawArrays(gl.TRIANGLES, 0, 36);
  requestAnimationFrame(render);
}
requestAnimationFrame(render);
